<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<div th:fragment="editShiyongyuanze">
    <div id="editShiyongyuanzeModal" style="" class="modal fade bs-example-modal-lg"
         tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
        <div class="modal-dialog" style="width: 850px;">
            <div class="modal-content" style="height: 600px;" >
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                            aria-hidden="true">&times;</button>
                    <h3 class="modal-title" id="myModalLabel_shiyongyuanze"></h3>
                </div>
                <div class="modal-body" style="overflow: auto;">
                    <div style="width: 800px; margin: 0 auto; margin-top: 15px">
                        <form class="form-horizontal col-sm-12" role="form">

                            <div class="form-group">
                                <label class="col-sm-3 control-label">
                                  适用原则
                                </label>
                                <div class="col-sm-8" style="height: 400px;">
<!--                                    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>-->
                                    <div style="margin: 15px 0;">绝对优先原则</div>
                                    <el-checkbox-group v-model="syyz_value" @change="handleCheckedCitiesChange">
                                        <el-checkbox style="display: block" v-for="shiyongyuanzeitem in shiyongyuanzelist.slice(0,3)" :label="shiyongyuanzeitem.id" :key="shiyongyuanzeitem.id" :value="shiyongyuanzeitem.id">{{ shiyongyuanzeitem.id }}{{ shiyongyuanzeitem.text }}</el-checkbox>
                                    </el-checkbox-group>
                                    <div style="margin: 15px 0;">相对优先原则</div>
                                    <el-checkbox-group v-model="syyz_value" @change="handleCheckedCitiesChange">
                                        <el-checkbox style="display: block" v-for="shiyongyuanzeitem in shiyongyuanzelist.slice(3,7)" :label="shiyongyuanzeitem.id" :key="shiyongyuanzeitem.id" :value="shiyongyuanzeitem.id">{{ shiyongyuanzeitem.id }}{{ shiyongyuanzeitem.text }}</el-checkbox></br>
                                    </el-checkbox-group>
<!--                                    <el-select style="width: 100%" ref="selectRef" v-model="syyz_value" multiple placeholder="请选择" @change="syyzChange">-->
<!--                                        <el-option-->
<!--                                                v-for="shiyongyuanzeitem in shiyongyuanzelist"-->
<!--                                                :key="shiyongyuanzeitem.text"-->
<!--                                                :lable="shiyongyuanzeitem.text"-->
<!--                                                :value="shiyongyuanzeitem.id">-->
<!--                                            {{ shiyongyuanzeitem.id }}{{ shiyongyuanzeitem.text }}-->
<!--                                        </el-option>-->
<!--                                    </el-select>-->
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-sm-12" style="text-align: center;">

                                    <input type="button" class="btn btn-success"
                                           value="保 存" @click="modifyShiyongyuanze()">
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!-- /.modal -->
    </div>
</div>
<style>
    #editShiyongyuanzeModal .el-checkbox{
        display:block;
    }
    .flex {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
    }

    .flex-v {
        -webkit-box-orient: vertical;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .flex-1 {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
    }

    .flex-align-center {
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .flex-pack-center {
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .flex-pack-justify {
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }

    .flex-space-around {
        -webkit-justify-content: space-around;
        justify-content: space-around;
    }
</style>
</html>